<template>
  <div class="">

    <a-row class="row-class" type="flex" justify="center" :gutter="[16, 0]" v-for="(item, index) in list"
      :key="item.JobItemIndex">
      <!-- 选中 Start -->
      <a-col class="flex-justify-center" :span="1">
        <check-box :item="item" text="check"></check-box>

      </a-col>
      <!-- 约束End -->
      <!-- 序号 Start -->
      <a-col class="flex-justify-center" :span="1" draggable="true" @dragstart.native="dragstart(index)"
        @dragenter.native="dragenter($event, index)" @dragover.native="dragover($event, index)">
        {{ index + 1 }}
      </a-col>
      <!-- 序号 End -->

      <!-- 项目类型 Start-->
      <a-col class="flex-justify-center" :span="2">
        <!-- 聚合表单类型 -->
        <a-select size="small" style="width: 100%" v-model="item.JobItemType" v-if="itm.TableType == 2">
          <a-select-option :value="pitem.code" v-for="pitem in projectTypeList" :key="pitem.code">
            {{ pitem.name }}
          </a-select-option>
        </a-select>

        <!-- 单例表单类型 -->
        <a-select size="small" style="width: 100%" v-model="item.JobItemType" v-if="itm.TableType == 1">
          <a-select-option :value="pitem.code" v-for="pitem in projectTypeLists" :key="pitem.code">
            {{ pitem.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <!-- 项目类型 End -->

      <!-- 数据类型 Start -->
      <a-col class="flex-justify-center" :span="2">
        <a-select default-value="lucy" size="small" style="width: 100%" v-model="item.DataTypeID">
          <a-select-option :value="ditem.DataTypeID" v-for="ditem in typelist" :key="ditem.DataTypeID">
            {{ ditem.DataTypeName }}
          </a-select-option>
        </a-select>
      </a-col>
      <!-- 数据类型 End -->

      <!-- 名称 Start -->
      <a-col class="flex-justify-center" :span="5">
        <input-box :item="item" text="JobItemName" :index="index" :titleList='titleList' idx="3" :itm="itm"></input-box>
      </a-col>
      <!-- 名称 End -->

      <!-- 分组Start -->
      <a-col class="flex-justify-center" :span="2">
        <input-box :item="item" text="JobGroup" :index="index" :titleList='titleList' idx="4" :itm="itm"></input-box>
        <!-- <a-input size="small" v-model="item.JobGroup" /> -->
      </a-col>
      <!-- 分组End -->

      <!-- 描述Start -->
      <!-- <a-col class="flex-justify-center" :span="2" :order="6">
        <input-box :item="item" text="JobItemDesc" :index="index" :titleList='titleList' idx="5" :itm="itm"></input-box>
       
      </a-col> -->
      <!-- 描述End -->
      <!-- 详细步骤 Start -->
      <a-col class="flex-justify-center" :span="2">
        <input-box :item="item" text="JobItemDetail" :index="index" :titleList='titleList' idx="6" :itm="itm"></input-box>
        <!-- <a-input size="small" v-model="item.JobItemDetail" /> -->
      </a-col>
      <!-- 详细步骤 End -->
      <!-- 内容选项 Start -->
      <a-col class="flex-justify-center" :span="4">
        <input-box :item="item" text="PackageSource" :index="index" :titleList='titleList' idx="7" :itm="itm"></input-box>
        <!-- <a-input size="small" v-model="item.PackageSource" /> -->
      </a-col>
      <!-- 内容选项End -->

      <!-- 默认值Start -->
      <a-col class="flex-justify-center" :span="2">
        <input-box :item="item" text="DefaultValue" :index="index" :titleList='titleList' idx="8" :itm="itm"></input-box>
        <!-- <a-input size="small" v-model="item.DefaultValue" /> -->
      </a-col>
      <!-- 默认值End -->
      <!-- 必填 Start -->
      <a-col class="flex-justify-center" :span="1">
        <check-box :item="item" text="MustRecord"></check-box>

      </a-col>
      <!-- 必填 End -->
      <!-- 高级设置 Start -->
      <a-col class="flex-justify-center cursor-class" :span="1" @click="settionFun(item)">
        设置
      </a-col>
      <!-- 高级设置 End -->
      <!-- 删除 Start -->
      <a-col class="flex-justify-center" :span="1">
        <a-icon type="close" class="cursor-pointer" @click="delterm(item, index)" />
      </a-col>
      <!-- 删除End -->
    </a-row>
  </div>
</template>
 
<script>
import { deleteJobItmes } from "@/api/JobItem";
import InputBox from '../InfoMoudle/input-box.vue'
import CheckBox from '../InfoMoudle/check-box.vue'
export default {
  props: ["list", "typelist", "itm", "titleList"],
  components: {
    InputBox,
    CheckBox
  },
  data() {
    return {
      projectTypeList: [
        {
          name: "手输项目",
          code: 11,
        },
        {
          name: "计算项目",
          code: 21,
        },
        {
          name: "聚合表头",
          code: 31,
        },
        {
          name: "聚合表尾",
          code: 41,
        },
      ], //类型列表
      projectTypeLists: [{
        name: "手输项目",
        code: 11,
      },
      {
        name: "计算项目",
        code: 21,
      },],//单例表单类型列表
      dragIndex: "", // 源对象的下标
      enterIndex: "", // 目标对象的下标
      timeout: null, //防抖计时器
    };
  },
  methods: {

    dragstart(index) {
      this.dragIndex = index;
    },
    // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。
    // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
    dragenter(e, index) {
      e.preventDefault();
      this.enterIndex = index;
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
        if (this.dragIndex !== index) {
          const source = this.list[this.dragIndex];
          this.list.splice(this.dragIndex, 1);
          this.list.splice(index, 0, source);
          // 排序变化后目标对象的索引变成源对象的索引
          this.dragIndex = index;
        }
      }, 100);
    },
    dragover(e, index) {
      e.preventDefault();
    },
    //弹出高级设置
    settionFun(item) {
      this.$emit("settionShowFun", { item, flag: true });
    },
    //删除项
    delterm(item, index) {
      let _this = this;
      this.$confirm({
        title: "提示",
        content: `是否删除序号为【${item.JobItemIndex}】的项？`,
        async onOk() {
          if (item.JobItemID) {
            _this.$emit('saveList', _this.itm)
            setTimeout(async () => {
              let res = await deleteJobItmes([item]);
              _this.$notification.success({
                message: '提示',
                description:
                  '删除成功',
              });
              _this.$emit("upList", item);
            }, 1000)

          } else {
            _this.list.splice(index, 1);
          }
        },
        onCancel() { },
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.ant-row-flex {
  margin-bottom: 0.9375rem;
}

.ant-row-flex:last-child {
  margin-bottom: 0;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor-class {
  cursor: pointer;
  color: rgb(76, 76, 206);
}
</style>